//判断用户输入的内容格式是否正确
//阻止提交
let submitBtn = document.querySelector('#submit')


let validateFieldOpt = {
    email: {
        rule: { reg: /^\w{2,}@\w{2,}\.[A-Za-z0-9]{2,}$/ },
        successMsg: " ",
        errorMsg: "邮箱格式不正确"
    },
    tel: {
        rule: { reg: /^1[2-9]\d{9}$/ },
        successMsg: " ",
        errorMsg: "电话号码格式不正确"
    },
    username: {
        rule: { reg: /^[a-zA-Z]\w{5}/ },
        successMsg: " ",
        errorMsg: "用户名格式不正确"
    },
    password1: {
        rule: { reg: /^.{6,20}$/ },
        successMsg: " ",
        errorMsg: "密码长度为6-20位"
    },
    password2: {
        rule: { reg: /^.{6,20}$/, equal: 'password1' },
        successMsg: " ",
        errorMsg: "两次密码不一样"
    }
}

class ValidateForm {

    constructor(validateFieldOpt) {
            this._init(validateFieldOpt)
        }
        //初始化
    _init(validateFieldOpt) {
        this.validateFieldOpt = validateFieldOpt
        this.valiRes = {}
        this.iptEle = {}
        this.helpEle = {}
        for (var key in validateFieldOpt) {
            this.valiRes[key] = false
            this._getIptEle(key)
            this._getHelpEle(key)
        }
        Object.defineProperty(this.valiRes, 'pass', {
            enumerable: false,
            get: function() {
                let res = true;
                for (key in this) {
                    res = res && this[key]
                }
                return res
            }
        })
    }

    _getIptEle(eleId) {
        this.iptEle[eleId] = document.getElementById(eleId)
    }
    _getHelpEle(eleId) {
        this.helpEle[eleId] = document.getElementById(eleId + '-helpBlock')
    }

    _validateItem(eleId) {
        let ctx = this
        ctx.iptEle[eleId].onblur = function() {
            let value = this.value
            let ruleObj = ctx.validateFieldOpt[eleId].rule
            ctx.valiRes[eleId] = ctx._valiRule(value, ruleObj)
            ctx._handleValiRes(eleId)
        }
    }

    _valiRule(value, ruleObj) {
            let res = true;
            //遍历验证规则中的项目，调用相关函数
            for (let ruleItem in ruleObj) {
                let valiFunc = `this._vali_${ruleItem}(value,ruleObj[ruleItem])`
                console.log(valiFunc)
                res = res && eval(valiFunc)
            }
            return res
        }
        /*验证rule规则中的项目*/
        //验证正则表达式
    _vali_reg(value, ruleReg) {
            return ruleReg.test(value)
        }
        //验证值
    _vali_value(value, ruleValue) {
            return value == ruleValue
        }
        //验证相等的字段
    _vali_equal(value, ruleEqual) {
        return value == this.iptEle[ruleEqual].value
    }
    _handleValiRes(eleId) {
        if (this.valiRes[eleId]) {
            this.iptEle[eleId].parentElement.classList.add('has-success')
            this.iptEle[eleId].parentElement.classList.remove('has-error')
            this.helpEle[eleId].innerText = this.validateFieldOpt[eleId].successMsg
        } else {
            this.iptEle[eleId].parentElement.classList.add('has-error')
            this.iptEle[eleId].parentElement.classList.remove('has-success')
            this.helpEle[eleId].innerText = this.validateFieldOpt[eleId].errorMsg
        }
    }

    isPass() {
        return this.valiRes.pass
    }

    validate() {
        for (var key in this.validateFieldOpt) {
            this._validateItem(key)
        }
    }
}

let vf = new ValidateForm(validateFieldOpt)
    //开启验证
vf.validate()
submitBtn.onclick = function(e) {
    if (!vf.isPass()) {
        e.preventDefault()
    }
}